<template>
  <div class="manage" >
    <div class="line"></div>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#FFC0CB"
        text-color="#fff"
        active-text-color="#ADD8E6">
      <el-menu-item index="1" @click="change()">推荐</el-menu-item>
      <el-submenu index="2"  >
        <template slot="title">
         动画
        </template>
        <el-menu-item @click="categary" index="2.1">动画</el-menu-item>
        <el-menu-item index="2.2">番剧</el-menu-item>
      </el-submenu>
      <el-submenu index="11" >
        <template slot="title">
          音乐
        </template>
        <el-menu-item index="11.1">音乐</el-menu-item>
        <el-menu-item index="11.2">番剧</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" @click="changecon">关注</el-menu-item>
      <el-menu-item index="4" @click="changehis()">历史播放</el-menu-item>
      <el-menu-item index="5" class="sesrch">
        <el-input
            placeholder="请输入内容"
            v-model="input"
            style="width: 200px;
             margin-bottom: 0px"
            @keyup.enter.native="search()">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </el-menu-item>
    </el-menu>
    <div class="body" style="height: 80vh">
      <el-scrollbar id="el-scrollbar__wrap" ref="scroll" class="scrollbar-wrapper" wrap-style="overflow-x:hidden;">

  <child-component :is="Component" :cate="cate" :gu="guan" :tui="tj" :tt="compdate" :callback="onCallback" :play="video" :vurl="url" >
   </child-component>

      </el-scrollbar>

    </div>

  </div>

</template>
<script>

import videolist from '../components/videoList.vue'
import Videopaly     from "@/components/Videopaly.vue";
import History     from "@/components/History.vue";
export default {
  components:{
    videolist,Videopaly,History
  },
  data() {
    return {
      cate:'',
      tj:1,
      guan:{},
      url:'',
      video:{},
      input:'',
      activeIndex: '2024/7/2',
      activeIndex2: '1',
      compdate: '',
      Component:'',
      currentDate: new Date()
    };
  },
  mounted: function () {
    this.Component='videolist'
  },
  watch:{
    video(){
      this.url='http://127.0.0.1:9091/hls/'+this.video.name+'/'+this.video.name+'.m3u8'
      this.Component='Videopaly'
    }
  },
  methods: {
    onCallback(date) {
      this.video=date
    },
    handScroll(){

    },
    changehis(){
      this.Component='History'
    },
    handleSelect(key, keyPath) {
      if(key==2.1||key==2.2){
       this.cate='动画'
      }else if(key==11.1||key==11.2){
        this.cate='音乐'
      }

    },
    categary(){

    },
    changecon(){
      this.Component='videolist'
      this.guan={uid:this.$cookies.get("user").id}

    },
    change(){
   this.Component='videolist'
      this.tj++
    },
     search(){
    this.compdate=this.input
      console.log("farht")
    }

  }

};
</script>
<style scoped>
/* 禁止整个页面的滚动 */


/* 允许el-scrollbar的父元素的滚动 */
.el-scrollbar__wrap {
  overflow-y: auto;
}
.el-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap
}

.sesrch{
  float: right;
}
.el-card {
  //min-width: 100%;
  //height: 100%;
  margin-left: 2%;
}



  .time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both}
</style>
